// 更换头像功能

// 一、获取用户信息
// 1.1 调用请求用户信息的函数,将图片显示到image标签上
getUserInfo(res => {
    // 1.2 解构出图片的地址
    const { user_pic } = res.data.data;
    // 1.3 判断一下是否有图片数据,有就设置图片的src属性
    if (user_pic) {
        $('#image').prop('src', user_pic)
    }
    // 1.4 处理裁剪工具后面的代码
    handleCropper()
})


function handleCropper() {
    // 二、裁剪工具
    // 2.1 获取要被添加裁剪插件的图片
    const image = $('#image')[0];
    // 2.2 配置插件
    const cropper = new Cropper(image, {
        aspectRatio: 1, // 裁剪图层的横纵比例
        preview: $('.img-preview'), // 需要显示裁剪后的图片的容器
    });

    // 三、预览图片
    // 3.1 点击上传按钮,触发表单的点击事件
    $('.select').on('click', () => {
        $('#file').click()
    });
    // 3.2 给表单注册onchange事件
    $('#file').on('change', (e) => {
        // 3.3 获取图片
        const file = e.target.files[0];
        // 3.4 生成url路径
        const url = URL.createObjectURL(file);
        // 3.5 回显图片
        cropper.replace(url)
    })

    // 四、确定按钮上传图片
    // 4.1 注册点击事件
    $('.sure').on('click', () => {
        // 4.2 格式转换,利用cropper的方法, 把裁剪区域输出到一个canvas标签上 
        // width和height是canvas标签的大小
        const canvas = cropper.getCroppedCanvas({ width: 100, height: 100 });
        // 4.3 canvas图像转成 base64字符串
        let base64Str = canvas.toDataURL('image/jepg');
        // 4.4 因为base64Str有一些特殊的符号, 前端要进行URL编码, 再传给后台(node+express)会进行URL解码
        base64Str = encodeURIComponent(base64Str);
        // 4.5 拼接请求参数
        const dataStr = 'avatar=' + base64Str;
        // 4.6 调用请求函数发送请求
        postAvatar(dataStr, res => {
            // console.log(res);
            // 4.7 更新父页面获取头像信息
            parent.indexGetUserInfo()
        })

    })
}